<template>
  <common-drawer title="功能权限配置" :visible.sync="configVisible" :confirm="handleConfigConfirm">
    <el-tree
      ref="configTree"
      v-loading="loading"
      :data="treeData"
      show-checkbox
      default-expand-all
      node-key="id"
      :default-checked-keys="selected"
      :props="defaultProps"
    >
    </el-tree>
  </common-drawer>
</template>

<script>
import CommonDrawer from '@/components/common-drawer'
import { listFormatTree } from '@/utils'

export default {
  components: {
    CommonDrawer,
  },
  props: {
    // 是否显示侧边栏
    visible: {
      type: Boolean,
      default: false,
    },
    // 加载标识
    loading: {
      type: Boolean,
      default: false,
    },
    // 已勾选的项
    selected: {
      type: Array,
      default: () => [],
    },
    // 资源列表数据
    list: {
      type: Array,
      default: () => [],
    },
    confim: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      menuTreeData: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'id',
      },
    }
  },
  computed: {
    configVisible: {
      get(val) {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      },
    },
    // list转化为tree
    treeData() {
      return listFormatTree(this.list, {
        sort: 'ordered',
        parentId: 0,
        pid: '0',
      })
    },
  },
  methods: {
    async handleConfigConfirm() {
      const checked = this.$refs.configTree.getCheckedNodes()
      if (!checked.length) {
        this.$message.error('未勾选数据')
        return false
      }
      return this.confim(checked)
    },
  },
}
</script>

<style lang="less" scoped></style>
